<template>
  <!-- html 结构 -->
  <div class="big-child">
    <h3>大儿子的玩具：{{ toy }}</h3>
    <button @click="emit('custom-event-toy', toy)">自定义组件-子传父</button>
  </div>
</template>

<script lang="ts" setup name="BigChild">
  import { ref } from 'vue'

  let toy = ref('葫芦娃')

  let emit = defineEmits(['custom-event-toy'])
</script>

<style>
  /* 样式 */
  .big-child {
    margin-top: 10px;
    background-color: rgb(7, 209, 761);
    padding: 10px;
    box-shadow: 0 0 10px black;
    border-radius: 10px;
  }
  button {
    display: inline-block;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: all 0.3s ease;
  }
</style>
